<template>
  <head-top :loading="loading">
    <view class="search_head">

      <view class="search_head_title">
        <u-search :clearabled="true" :showAction="false" placeholder="搜索商品" @search="search" :animation="false"
          shape="round"></u-search>
      </view>
    </view>
    <view class="history" v-if="showh && searchistory.length > 0">
      <view class="search_history">
        <view>历史搜索</view>
        <view>
          <u-icon name="trash-fill" size="20"></u-icon>
        </view>
      </view>
      <view class="historycontent">
        <text class="history_item" v-for="item, index in searchistory" :key="index">{{ item }}</text>
      </view>
    </view>
    <b-list v-else></b-list>
  </head-top>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import BList from '@/components/BList/index.vue'
const loading = ref<boolean>(false)
const searchistory = ref<any>([])
const showh = ref<boolean>(true)

function search(node) {
  showh.value = false
  searchistory.value.push(node)

}

</script>
<style>
page {
  background: #fff;
}
</style>
<style scoped lang="scss">
.search_head {
  background: #fff;
  position: relative;
  width: 100%;
  margin-bottom: 139rpx;
  z-index: 99;
  left: 0;

  &_title {
    position: fixed;
    //#ifdef MP-WEIXIN
    top: 0;
    //#endif
    //#ifdef H5
    top: 80rpx;
    //#endif
    height: 139rpx;
    line-height: 139rpx;
    width: 93%;
    padding: 0 30rpx;
    background: #fff;
  }

}

.history {
  padding: 0 30rpx;

  .search_history {
    display: flex;
    justify-content: space-between;
  }

  .historycontent {
    padding-top: 30rpx;
    width: 100%;
  }

  &_item {
    padding: 20rpx 36rpx;
    background: #F7F7F7;
    border-radius: 40px;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    display: inline-block;
  }
}
</style>